<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>PDM点检</title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" href="../css/mui.picker.min.css">
    <style type="text/css">
        .detail {
            padding-right: 20px!important;
        }

        h5 {
            color: #0062CC;
        }

        .mui-navigate-right .mui-col-xs-8 {
            width: 62.666667%!important;
        }
    </style>
</head>

<body>
    <div class="mui-content">
        <ul class="mui-table-view mui-table-view-chevron type_list_spair">
            <li class="mui-table-view-cell detail" onclick="openSaveWin('work_order_sel_area','选择区域')">
                <div class="mui-table mui-navigate-right">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">区域：</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                        <span class="mui-h5" id="fixArea">请选择</span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('beginTime')">
      				<div class="mui-table mui-navigate-right">
      					<div class="mui-table-cell mui-col-xs-4">
      						<h5 class="mui-ellipsis">开始时间：</h5>
      					</div>
      					<div class="mui-table-cell mui-col-xs-8 mui-text-right">
      						<span class="mui-h5" id="schedstart">请选择</span>
      					</div>
      				</div>
      			</li>
      			<li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('endTime')">
      				<div class="mui-table mui-navigate-right">
      					<div class="mui-table-cell mui-col-xs-4">
      						<h5 class="mui-ellipsis">结束时间：</h5>
      					</div>
      					<div class="mui-table-cell mui-col-xs-8 mui-text-right">
      						<span class="mui-h5" id="schedfinish">请选择</span>
      					</div>
      				</div>
      			</li>
        </ul>
        <!-- 图表容器 DOM -->
        <div id="container" style="height:250px;"></div>
        <div id="container2" style="height:250px;"></div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../script/highcharts.js"></script>
<script src="../script/mui.picker.min.js"></script>
<script type="text/javascript">
    var areaArr = [], dataArr = []
    var seriesArr = [{
        name: '已关闭',
        data: [],
        color: '#89CC40'
    }, {
        name: '未关闭',
        data: [],
        color: '#EE1712'
    }]
    apiready = function() {
        onLoadData()
        api.addEventListener({
            name: 'fixArea'
        }, function(ret, err) {
            $api.html($api.byId('fixArea'), ret.value.fixAreaValue)
            onLoadData()
        })
    }

    function getCheckPointChart() {
        //1.设置图表窗口自适应手机宽度
        $api.css($api.byId("container"), 'width:100%');
        $api.css($api.byId("container2"), 'width:100%');
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: '区域总测点'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                labels:{
                  enabled:false
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
              column: {
                  borderWidth: 0,
                  dataLabels: {
                  // inside: true,
                  enabled: true,
                  // allowOverlap: true // 允许数据标签重叠
                 }
              },
            },
            series: [{
                name: '',
                data: dataArr,
                // dataLabels: {
                //     enabled: true,
                //     rotation: 0,
                //     color: '#FFFFFF',
                //     align: 'right',
                //     format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                //     y: 0
                // }
            }]
        });
        var chart2 = Highcharts.chart('container2', {
            chart: {
                type: 'column'
            },
            title: {
                text: '超限测点'
            },
            xAxis: {
                categories: areaArr,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:['已关闭','未关闭'],
                selected: {
        				    '已关闭' : false,
        				    //不想显示的都设置成false
        				  }
            },
            tooltip: {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
              column: {
                  borderWidth: 0,
                  dataLabels: {
                  // inside: true,
                  enabled: true,
                  // allowOverlap: true // 允许数据标签重叠
                 }
              },
                series: {
                  cursor: 'pointer',
                  events: {
                      click: function (e) {
                        var schedstart = getText('schedstart') == '请选择' ? '' : getText('schedstart')
                        var schedfinish = getText('schedfinish') == '请选择' ? '' : getText('schedfinish')
                        var series = this.chart.series
                        if (this.index == 1 && !series[0].visible) {
                          var cRegion = $api.text($api.byId('fixArea')) == '请选择' || $api.text($api.byId('fixArea')) == '所有' ? '' :  $api.text($api.byId('fixArea'))
                          openTastWin('limit_test_order','超限测点',{
                            isOverRun: 1,
                            worktype: 'P03',
                            pointNumType: e.point.category,
                            cRegion: cRegion,
                            isClose: '0',
                            startDate: schedstart,
                            endDate: schedfinish
                          })
                        }
                      },
                      legendItemClick: function(e) {
                        // alert("第"+this.index+"个图例被点击了，是否可见:"+!this.visible);
                        var series = this.chart.series
                        if (this.index == 1) {
                          series.forEach((serie, k) => {
                            if (serie.hide()) {
                              serie.show()
                            }
                          })
                        } else {
                          if (series[0].hide()) {
                            series[0].show()
                          }
                        }
                      }
                  }
              }
            },
            series: seriesArr
        })
    }

    function chooseTime(type) {
        selectCommonYMDhm(function(data) {
            if (type == 'beginTime') {
                $api.html($api.byId('schedstart'), data);
            } else {
                $api.html($api.byId('schedfinish'), data);
            }
            onLoadData()
        })
    }
    function onLoadData() {
        onQuestData('queryTotalPointCnt', true)
        onQuestData('queryOverRunPointCnt', false)
    }
    function onQuestData(url, flag) {
      var cRegion = getText('fixArea') == '请选择' || getText('fixArea') == '所有' ? '' : getText('fixArea')
      var schedstart = getText('schedstart') == '请选择' ? '' : getText('schedstart')
      var schedfinish = getText('schedfinish') == '请选择' ? '' : getText('schedfinish')
      ajaxrd(url, {
        cRegion: !flag ? cRegion : '',
        startDate: !flag ? schedstart : '',
        endDate: !flag ? schedfinish : ''
      }, function(data) {
          if (flag && data.length < 10) {
              loadEnd = true
          }
          if (!flag && data.closed && data.closed.length < 10) {
              loadEnd = true
          }
          if (!flag && data.noClose && data.noClose.length < 10) {
              loadEnd = true
          }
          if (flag) { // 区域总测点
            dataArr = []
            if (!data.length) {
              api.toast({
                  msg: "数据为空",
                  duration: 1000,
                  location: 'middle'
              });
            }
            for (var i = 0; i < data.length; i++) {
              dataArr.push([data[i].pointNumType, data[i].pointCnt])
            }
          } else {  // 超限测点
            areaArr = []
            seriesArr[0].data = []
            seriesArr[1].data = []
            if (!data.length) {
                api.toast({
                    msg: "超限测点数据为空",
                    duration: 2500,
                    location: 'middle'
                });
            } else {
              for (var i = 0; i < data.length; i++) {
                areaArr.push(data[i].pointNumType + '')
                seriesArr[0].data.push(data[i].closedCnt)
                seriesArr[1].data.push(data[i].noClosecnt)
              }
            }
          }
          getCheckPointChart()
      })
    }
</script>

</html>
